<template>
	<view class="Forum">
		<CardEc v-for="item in categories" :key="item.categoryId" :list="item.list" :headerLeftSlot="true"
			:headerRightSlot="true">
			<template slot="headerLeft">
				<view v-if="categoriesStatus" class="text-bold">{{item.name}}</view>
				<view v-else style="height: 40upx;width: 200upx;" class="rloading"></view>
			</template>
			<template slot="headerRight">
				<view @click="addAllFn(item.categoryId)" v-if="categoriesStatus" class="text-sm text-gray flex align-center">
					<image class="margin-right-xs" style="width: 24upx;height: 24upx;" src="@/static/forum/add.png" mode="scaleToFill"></image>添加全部绘本</view>
				<view v-else style="height: 30upx;width: 100upx;" class="rloading"></view>
				<view></view>
			</template>
			<view class="Forum-content">
				<view class="Forum-grid">
					<view @click="navToPictureFn(itemList)" v-for="itemList in item.list" :key="itemList.id"
						class="Forum-item bg-white radius flex  align-center ">
						<view>
							<view v-if="categoriesStatus" class="text-black">{{itemList.name}}</view>
							<view v-else style="height: 40upx;width: 150upx;" class="rloading"></view>
							<view v-if="categoriesStatus" class="margin-top-xs text-sm text-gray">
								绘本：{{itemList.bookCnt}}本
							</view>
							<view v-else style="height: 30upx;width: 100upx;" class="margin-top-xs  rloading"></view>
						</view>
						<view class="Forum-image margin-left">
							<image src="@/static/forum/book.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</CardEc>
		<Divider v-if="categoriesStatus && categories.length==0" text="暂无数据" />
		<!-- 添加全部绘本 -->
	<!-- 	<view v-if="categoriesStatus && categories.length>0 " class="Forum-footer">
			<view class="flex align-center justify-center">
				<button @click="addAllFn" class="cu-btn bg-orange">添加全部绘本</button>
			</view>
		</view> -->
		<!-- ios兼容 -->
		<view v-else class="ios-safe"></view>
		<!-- 弹窗 -->
		<Modal :showCancel="!getUserInfoValue.isVip" @confirm="confirm" @cancel="showModal=false" :show="showModal">
			<view class="padding-xl">
				{{
				 	(getUserInfoValue && getUserInfoValue.isVip) ? '绘本添加成功' : '您还不是 VIP 会员，绘本添加失败，分享小程序得会员'
				}}
			</view>
		</Modal>
	</view>
</template>

<script>
	import CardEc from '@/plugin/card_ec.vue';
	import Modal from '@/plugin/modal.vue';

	import * as api from '@/api/Forum/index.js';
	import userInfoConfig  from '@/utils/userInfo_config.js';
	export default {
		mixins:[userInfoConfig],
		components: {
			CardEc,
			Modal
		},
		data() {
			return {
				// 论坛分类
				categoriesStatus: false,
				categories: [{
					list: [{}, {}, {}, {}]
				}],
				// 添加弹窗
				showModal: false
			}
		},
		onLoad() {
			this.getBbsCategories();
		},
		methods: {
			// 跳转论坛页面
			navToPictureFn(val){
				uni.navigateTo({
					url:`/forumPage/Tribune/index?id=${val.id}&name=${val.name}`
				})
			},
			// 添加全部绘本
			async addAllFn(value) {
				if (this.getUserInfoValue.isVip) {
					let res = await api.addAll(value);
					if (res.code === 0) {
						uni.showToast({
							title:"添加成功"
						})
					}
				} else {
					this.showModal = true;
				}
			},
			// 添加绘本
			async addFn(val) {
				if (this.getUserInfoValue.isVip) {
					let res = await api.addBook(val);
					if (res.code === 0) {
						this.showModal = true;
					}
				} else {
					this.showModal = true;
				}
			},
			// 添加确认按钮
			confirm() {
				if (this.getUserInfoValue.isVip) {
					this.showModal = false
				} else {
					uni.navigateTo({
						url: '/personPages/Share/index'
					})
				}
			},
			// 获取资源论坛分类
			async getBbsCategories() {
				let res = await api.bbsCategories();
				this.categoriesStatus = true;
				if (res.code === 0) {
					this.categories = res.data;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Forum {

		.Forum-content{
			width: 100vw;
			padding: 0 30upx 30upx;
			box-sizing: border-box;
			.Forum-grid {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(2, calc(100% / 2 - 30upx / 2));
				grid-gap: 20upx 30upx;
			
				.Forum-item {
					box-shadow: 0 0 10upx rgba(0, 0, 0, 0.5);
			        justify-content: space-between;
					padding: 30upx 15upx 30upx 30upx;
					>view:first-child {
						flex: auto;
					}
			
					.Forum-image {
						width: 80upx;
			
						image {
			                min-width: 80upx;
							width: 80upx;
						    max-height: calc(80upx / 54 * 62);
						}
					}
				}
			}
			
		}
	
		.Forum-footer {
			height: 200upx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			>view {
				width: 100vw;
				height: 200upx;
				position: fixed;
				bottom: 0;
				left: 0;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);

				&::after {
					position: absolute;
					content: "";
					left: 0;
					bottom: 0;
					padding-bottom: constant(safe-area-inset-bottom);
					padding-bottom: env(safe-area-inset-bottom);
					background-color: #fff;
					width: 100%;
				}
			}
		}
	}
</style>